<template>
<!--  登录界面-->
  <div >
    <div class="img-div">
      <img src="../assets/bj.jpg" style="width: 100%;height: 100%;" alt="">
    </div>
    <div class="kouhao">
      <h3 style="margin: 0;font-size: 54px;letter-spacing: 0;font-weight: 700;">用心服务</h3>
      <span style="font-size: 32px;letter-spacing: 3.81px;font-weight: 300;">品质是信任的保障</span>
    </div>
    <div class="shangbiao"  ><i class="icon-bxl-spring-boot" style="color:white;height: 40px;width: 40px" ><span style="font-size: 30px">&nbsp;速朋电子商务</span></i></div>
      <div  class="login">
        <p>Login</p>
        <input type="text" v-model="userName" placeholder="用户名">
        <input type="password" v-model="password" placeholder="密码">
        <input @click="loginBtn" type="submit" class="btn" value="登  录">
      </div>

  </div>

</template>

<script>
import {post} from "../utils/request";

export default {
  name: "Login",
  data(){
    return{
      userName:'',
      password:''
    }
  },
  created() {
    if (localStorage.getItem("token")){
      this.$router.push("/main")
    }
    },
  methods:{
    loginBtn(){
      var userName = this.userName.replace(/\s*/g,"");
      var password = this.password.replace(/\s*/g,"");
      if (userName===''){
        this.$message({
          message: '用户名不能为空',
          type: 'warning'
        });
        return
      }
      if (password===''){
        this.$message({
          message: '密码不能为空',
          type: 'warning'
        });
        return
      }

      let user={
        userName:userName,
        password:password
      }
      post('/api/login/user',user).then(resp=>{
        if (resp.data.code===1){
          this.$message({
            message: '登录成功,'+resp.data.data.userName,
            type: 'success'
          });
          localStorage.setItem("token",resp.data.data.token)
          this.$router.push("/main")
        }else {
          this.$message.error("登录失败，用户名或密码有误")
        }
      }).catch(err=>{
        this.$message.error("系统出错了，请稍后再试")
      })

    }
  }
}
</script>

<style scoped>
*{
  user-select: none;
  /* 无法选中，整体感更强 */
}
.kouhao{
  color: white;
  position: absolute;
  top: 67%;
  margin-top: -200px;
  left: 25%;
  margin-left: -200px;
  /* absolute居中的一种方法 */
  border-radius: 25px;
  text-align: left;
  padding: 5px 40px;
  box-sizing: border-box;
  /* 这样padding就不会影响大小 */
}
.img-div{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
}
.shangbiao{
  color: white;
  position: absolute;
  top: 34%;
  margin-top: -200px;
  left: 15%;
  margin-left: -200px;
  /* absolute居中的一种方法 */

  border-radius: 25px;
  text-align: center;
  padding: 5px 40px;
  box-sizing: border-box;
  /* 这样padding就不会影响大小 */
}
.login{
  position: absolute;
  top: 50%;
  margin-top: -200px;
  left: 75%;
  margin-left: -200px;
  /* absolute居中的一种方法 */
  /*background: rgba(255,255,255,.9);*/
  background-color: whitesmoke;
  width: 400px;
  height: 400px;
  border-radius: 25px;
  text-align: center;
  padding: 5px 40px;
  box-sizing: border-box;
  /* 这样padding就不会影响大小 */
}

p{
  font-size: 42px;
  font-weight: 600;
}

input{
  /*background: rgba(255,255,255,.9);*/
  background-color: whitesmoke;

  width: 100%;
  height: 48px;
  margin-bottom: 10px;
  border: none;
  border-bottom: 2px solid silver;
  /* 下面的会覆盖上面的步伐 */
  outline: none;
  font-size: 22px;
}

.btn{
  /*background-color: #59c2c5;*/
  background-color: #67bce1;
  width: 38%;
  height: 48px;
  border-radius: 8px;
  margin-top: 40px;
  font-size: 28px;
  font-weight: 600;
  color: white;
}
.btn:hover{
  /*background-color: #59c2a0;*/
  background-color: #a4ddf1;
}
</style>
